<template>
	<view>
		<!-- 顶部占位栏（适配状态栏 + 导航栏） -->
			<view :style="{ height: statusBarHeight + 'px' }"></view>
	<view>
		<uni-card class="tips" v-for="item in reserveList">
			<u-row>
				<u-col span="8">
					<view class="name">{{item.reserveName}}</view>
					<view class="address">{{item.reserveAdress}}</view>
				</u-col>
				<u-col span="4">
					<!-- :disabled="this.isDisabled" -->
					<u-button class="custom-style" :plain="true" text="取消"  @click="reserve(item.reserveId)"></u-button>
				</u-col>
			</u-row>
		</uni-card>
	</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				statusBarHeight: 0,
				userId: 0,
				tokenList: [],
				reserveList: []
			};
		},
		onLoad() {
	const systemInfo = uni.getSystemInfoSync();
					this.statusBarHeight = systemInfo.statusBarHeight || 0;
			this.tokenList = uni.getStorageSync("storage_data") || {};
			// # 通过点出他的名字拿取vuex_xxx 比如id就是vuex_id 
			this.userId = this.tokenList.vuex_id
			console.log(this.userId)
			this.getReserveList()
		},
		methods: {

			getReserveList() {

				uni.request({
					url: this.$BASE_URL.baseUrl + '/mine/reserve/list',
					data: {
						reserveUserId: this.userId,
					},
					success: (res) => {
						console.log(res.data.rows)
						this.reserveList = res.data.rows
						console.log(this.reserveList)
					}
				})
			},
			reserve(id) {
			
			  uni.request({
			    url: this.$BASE_URL.baseUrl + '/mine/reserve/' + id,
			    method: 'DELETE',
			    // header: {
			    //   'Content-Type': 'application/json'
			    // },
			    success: (res) => {
			      // 删除成功后再更新列表
			      this.getReserveList();
			    },
			    fail: (err) => {
			      console.error('Failed to delete comment:', err);
			      // 在请求失败时，可以根据需要处理错误情况
			    }
			  });
			}

		}
	};
</script>
<style>
	.tips {
		.name {
			font-size: 20px;
			color: black;
			padding-bottom: 10px;
		}
	}
</style>